<template>

	<div>
		<div>
			
			<div>
		    	<img :src="pic" />
				<audio :src="firstAudio" style="width: 100%;position: absolute;top: 9.8rem;background: none;" controls>
		    		<source ></source>
				</audio>
			</div>

			<!--<div class="audio-wrapper">
				<audio>
					<source src="https://audio.zhouzi.fxm365.com/audio/mianfei/zhouzisiwei/zhouzisiwei01.mp3" type="audio/mp3">
				</audio>
				<div class="audio-left" @click="player()">
					<img id="audioPlayer" src="../../static/image/play.png">
				</div>
				<div class="audio-right">
					<div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
						<div class="progress-bar" id="progressBar"></div>
					</div>
					<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
				</div>
			</div>-->

		</div>
		
		
		<div style="padding-bottom: 3rem;">

			<div style="border-bottom: solid 1px #C8C9C9 ;padding-top: 0.5rem;padding-bottom: 0.5rem;" v-for="(item,index) in list" @click="toAudioDetail(index)">

				<flexbox>
					<flexbox-item :span='1.5' style='margin-right: 0;'>
						<div class="flex-demo">
							<div style="font-size: 1.5rem;color: #C7C7C7;" class="audio_icon iconfont icon-bofang1"></div>
						</div>
					</flexbox-item>
					<flexbox-item style='margin-left: 0;'>
						<div class="flex-demo" style="text-align: left;padding-right: 0.7rem;">
							
							<div style="width: 100%;overflow: hidden;height: 1.5rem;">{{item.title}}</div>
							<div style="color: #B3B3B3;font-size: 0.95rem;">
								<span>{{item.showtime}}</span>
								<span>时长{{item.length_time}}</span>
							</div>
							
						</div>
					</flexbox-item>
				</flexbox>

			</div>

		</div>
		
		<!--悬浮弹窗-->
		<div style="width:100%;position: fixed;bottom: 0;z-index: 999999;font-size: 1.3rem;line-height: 3rem;">
			<flexbox>
		      <flexbox-item>
		      	<div @click="offLine" v-if="course_buy == false" class="flex-demo" style="background:#8D087B;color: #FFFFFF;">报名线下课</div>
		      	<div v-else class="flex-demo" style="background:#8D087B;color: #FFFFFF;">已购买</div>
		      </flexbox-item>
		      <flexbox-item style="margin-left: 0;">
		      	<div @click="onLine" v-if="lesson_buy == false" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">订阅专栏</div>
		      	<div v-else class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">已购买</div>
		      </flexbox-item>
		   </flexbox>
		</div>
		
		
		<!--线上弹窗-->
		<div class="attr-picker" v-show="judge == true" @click="signOut">
			<div class="content-box" >
				<div style="padding: 0.5rem;line-height: 2rem;">
					<div>课程：{{lesson_info.name}}</div>
				    <div>时间：1年</div>
				    <div>价格：￥{{lesson_info.price}}</div>
				</div>
				<div>
				    <div @click.stop="clear">
				    	<group>
					      <x-switch @on-change="onChangeMoney(value)"  style="color: #8F3DC5;background: #F7F7F7;"  :title="onLineChange"  v-model="value"></x-switch>
					    </group>
				    </div>
			   </div>
			   
			   <div style="line-height: 3rem;border-bottom: solid 1px #CBCBCB;">
			   	<flexbox>
					<flexbox-item><div class="flex-demo" style="background: #FFFFFF;color: red;">
						合计：￥{{onLineMoney}}
					</div></flexbox-item>
				    <flexbox-item style="margin-left: 0;"><div @click.stop="onsettlement" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">
				    	结算
				    </div></flexbox-item>
				</flexbox>
			   </div>
					    
			</div>
			
		</div>
		
		<!--线下弹窗-->
		<div class="attr-picker" v-show="offShow == true" @click="signOut">
			<div class="content-box" >
				<div style="padding: 0.5rem;line-height: 2rem;">
					<div>课程：{{offLineDetail.name}}</div>
				    <div>时间：{{offLineDetail.time}}</div>
				    <div>地点：{{offLineDetail.area}}</div>
				    <div>价格：￥{{offLineDetail.price}}</div>
				</div>
				<div>
				    <div  @click.stop="offclear">
				    	<group>
					      <x-switch @on-change="changeMoney(offvalue)"  style="color: #8F3DC5;background: #F7F7F7;"  :title="offLineChange"  v-model="offvalue"></x-switch>
					    </group>
				    </div>
				    
				    
				    <div style="padding: 0.5rem 0;">
				    	<flexbox >
					      <flexbox-item :span="2"><div class="flex-demo" style="text-align: right;">
					      	数量：
					      </div></flexbox-item :span="6">
					      <flexbox-item><div  >
						    <div style="border: solid 1px #CBCBCB;padding: 0.4rem 0;">
						    	<flexbox>
							      <flexbox-item><div class="flex-demo" style="border-right: solid 1px #CBCBCB;" @click.stop="reduceNum">
							      	-
							      </div></flexbox-item>
							      <flexbox-item style="margin-left: 0;"><div class="flex-demo" >{{num}}</div></flexbox-item>
							      <flexbox-item><div class="flex-demo" style="border-left: solid 1px #CBCBCB;" @click.stop="addNum">
							      	+
							      </div></flexbox-item>
							    </flexbox>
						    </div>
					      	
					      </div></flexbox-item>
					      <flexbox-item ><div class="flex-demo"></div></flexbox-item>
					   </flexbox>
				    </div>
				    
				    
				    
			   </div>
			   
			   <div style="line-height: 3rem;border-bottom: solid 1px #CBCBCB;">
			   	<flexbox>
					<flexbox-item><div class="flex-demo" style="background: #FFFFFF;color: red;">
						合计：￥{{offLineMoney}}
					</div></flexbox-item>
				    <flexbox-item style="margin-left: 0;"><div @click.stop="offsettlement" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">
				    	结算
				    </div></flexbox-item>
				</flexbox>
			   </div>
					    
			</div>
			
		</div>
		
		<toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="message" ></toast>
		
	</div>

</template>

<script>
	import { base64, Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem, XSwitch, Group, InlineXNumber ,Toast } from 'vux'
	export default {
		components: {
			Tab,
		    TabItem,
		    Sticky,
		    Divider,
		    XButton,
		    Swiper,
		    SwiperItem,
		    XSwitch,
		    Group,
		    InlineXNumber,
		    Toast,
		    base64
		},
		data() {
			return {
				
				message:'',
				showPositionValue:false,
				change: true,
				src: '',
				lesson_id:'',
				list:'',
				pic:'',
				lesson_buy:'',
				course_buy:'',
				course_id:'',
				value:false,
				
				offShow:false,
		    	judge:false,
		    	num:1,
		    	offvalue:false,
		    	offLineDetail:'',
		    	offLineUser:'',
		    	offLineChange:'',
		    	offLineTotal:'',
				offLineTotalMoney:0,
				offLineMoney:0,
			    offintergral:'',
			    offtotalintegral:'',
			    judge:false,
			    lesson_info:'',
			    onLineMoney:'',
			    onLineUser:'',
				onLineChange :'',
				onLineTotal:'',
				onLineMoney:'',
				onintergral:'',
			    audioAll:[],
			    firstAudio:''

			}
		},

		methods: {

			getDetail() {

				this.$store.commit('updateLoadingStatus', true);

				this.$http.get(this.$store.state.api + 'index/audio-info&id=' + this.lesson_id+'&access_token=' + this.access_token)
					.then((response) => {

							console.log(response)

						if(response.body.code == 0){
							
							this.list = response.body.data.list
							
							console.log(this.list)
							
							this.lesson_buy = this.list[0].lesson_buy
							this.course_buy = this.list[0].course_buy
							this.course_id = this.list[0].course_id
							
							if(this.list[0].lesson_buy == true){
								
								this.firstAudio = response.body.data.list[0].audio_url
								
							}else{
								
								this.firstAudio = ''
								
							}
							
							
							console.log(this.firstAudio)
							
							
						}

						this.$store.commit('updateLoadingStatus', false);

					}, (response) => {

					});

		    },
		    
		    //播放下一首
		    audioNext(){
		    	
		    	
		    	
		    },
		    
		
		//点击报名线下课
	    offLine(){
	    	this.offShow = true,
	    	this.judge = false,
	    	this.num = 1,
	    	this.offvalue = false
	    	
	    	this.$http.get(this.$store.state.api + 'course-order/submit-preview&access_token=' + this.access_token + '&id=' + this.course_id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.offLineDetail = response.body.data.course_info,
					this.offLineUser = response.body.data.user,
					this.offLineChange = '可用' + response.body.data.user.integral + '学分抵用' + response.body.data.user.integral2money +'元',
					this.offLineTotal = response.body.data.course_info.price,
					this.offLineTotalMoney = response.body.data.course_info.price,
					this.offLineMoney = response.body.data.course_info.price
					this.offintergral = response.body.data.user.integral
					
				} else {
					
				}
			}, (response) => {
                 
                 
			});
	    	
	    },
	    
	    //线下开关清除冒泡
		offclear(){},
	    
	    //线下开关选择
	    changeMoney(offvalue){
	    	
	    	if( offvalue == true ){
	    		this.offtotalintegral = this.offintergral
	    		this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
	    	}else{
	    		this.offtotalintegral = 0
	    		this.offLineMoney = this.offLineTotalMoney
	    	}
	    	
	    	
	    },
	    
	    //退出弹窗
	    signOut(){
	    	this.judge = false,
	    	this.message = false,
	    	this.offShow = false
	    },
	    
	    //减少数量
	    reduceNum(){
	    	if(this.num > 1){
	    		this.num = this.num-1,
	    		
	    		this.offLineTotalMoney = parseFloat(this.offLineTotal) * parseFloat(this.num)
	    		this.offLineMoney = this.offLineTotalMoney
	    		
	    		if(this.offvalue == true){
	    			this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
	    		}else{
	    			this.offLineMoney = this.offLineTotalMoney
	    		}
	    		
	    	}
	    },
	    
	    //增加数量
	    addNum(){
	    	this.num = this.num+1
	    	console.log(this.num)
	    	this.offLineTotalMoney = parseFloat(this.offLineTotal) * parseFloat(this.num)
	    	this.offLineMoney = this.offLineTotalMoney
	    	
	    	if(this.offvalue == true){
    			this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
    		}else{
    			this.offLineMoney = this.offLineTotalMoney
    		}
	    	
	    },
	    
	    //线下结算
	    offsettlement(){
	    	
	    	this.offShow = false
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'web-wechat-order/course-submit',
		    	{
		    		access_token:this.access_token,
		    		id:this.course_id,
		    		num:this.num,
		    		use_integral:this.offtotalintegral,
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
		    		this.message = response.body.msg
		    		this.showPositionValue = true
				
				if(response.body.code == 0) {
					
					
					
					if(response.body.data.msg == '订单支付成功'){
						
						this.showPositionValue = true
						
					}else{
						
						WeixinJSBridge.invoke(
					        'getBrandWCPayRequest', {
					            'appId':response.body.res.appId,     //公众号名称，由商户传入     
					            'timeStamp':response.body.res.timeStamp,         //时间戳，自1970年以来的秒数     
					            'nonceStr':response.body.res.nonceStr, //随机串     
					            'package':response.body.res.package,     
					            'signType':response.body.res.signType,         //微信签名方式：     
					            'paySign':response.body.res.paySign //微信签名 
					        },
					        function(res){
					       	    console.log(res)
					            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
					        }
				        );
						
					}
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
	    	
	    },
	    
	    
	    
	    //点击报名线上课
	    onLine(){
	    	this.judge = true,
	    	this.offShow = false,
	    	this.value = false
	    	
	    	this.$http.get(this.$store.state.api + 'lesson-order/submit-preview&access_token=' + this.access_token + '&id=' + this.lesson_id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					
					this.lesson_info = response.body.data.lesson_info,
					this.onLineUser = response.body.data.user,
					this.onLineChange = '可用' + response.body.data.user.integral + '学分抵用' + response.body.data.user.integral2money +'元'
					this.onLineTotal = response.body.data.lesson_info.price,
					this.onLineMoney = response.body.data.lesson_info.price,
					this.onintergral = response.body.data.user.integral
//						
				} else {
					
				}
			}, (response) => {
                 
                 
			});
	    	
	    },
	    
	    //线上开关清除冒泡
	    clear(){},
	    
	    //线上开关选择
	    onChangeMoney(value){
	    	
	    	if( value == true ){
	    		this.ontotalintegral = this.onintergral
	    		this.onLineMoney =  this.onLineTotal - this.onLineUser.integral2money
	    	}else{
	    		this.ontotalintegral = 0
	    		this.onLineMoney = this.onLineTotal
	    	}
	    	
	    },
	    
	    
	    //线上结算
	    onsettlement(){
	    	
	    	this.judge = false
	    	
	    	this.$store.commit('updateLoadingStatus',true);
	    	
	    	this.$http.post(this.$store.state.api + 'web-wechat-order/lesson-submit',
	    	{
	    		access_token:this.access_token,
	    		id:this.lesson_id,
	    		num:1,
	    		use_integral:this.ontotalintegral,
	    	})
	    	.then((response) => {
	    		
	    		console.log(response)
	    		this.message = response.body.msg
	    		this.showPositionValue = true
			
			if(response.body.code == 0) {
				
				
				
				if(response.body.data.msg == '订单支付成功'){
					
					this.showPositionValue = true
					
				}else{
					
					WeixinJSBridge.invoke(
				        'getBrandWCPayRequest', {
				            'appId':response.body.res.appId,     //公众号名称，由商户传入     
				            'timeStamp':response.body.res.timeStamp,         //时间戳，自1970年以来的秒数     
				            'nonceStr':response.body.res.nonceStr, //随机串     
				            'package':response.body.res.package,     
				            'signType':response.body.res.signType,         //微信签名方式：     
				            'paySign':response.body.res.paySign //微信签名 
				        },
				        function(res){
				       	    console.log(res)
				            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				        }
			        );
					
				}
				
				
			} else {
				
			}
			
			this.$store.commit('updateLoadingStatus',false);
				
			
			}, (response) => {
                 
                 
			});
			
			
	    },
	    
	    //跳转到详情
	    toAudioDetail(index){
	    	
	    	
	    	if( this.lesson_buy == true ){
	    		
	    		var lesson_id = this.list[index].lesson_id
				var section_id = this.list[index].id
				
				this.$router.push({ path: '/audioDetail',name:'audioDetail',params:{lesson_id:lesson_id,section_id:section_id}});
	    		
	    	}else{
	    		
	    		this.showPositionValue = true;
	    		this.message = '请先购买'
	    		
	    	}
	    	
	    },
		

		//获取地址栏信息
		getUrlStr(name) {
			let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
			if(reg.test(window.location.href)) {
				return unescape(RegExp.$2.replace(/\+/g, " "))
			}
			return undefined
		},

	},

	mounted() {

			var lesson_id = this.$route.params.lesson_id
			var pic = this.$route.params.pic

			if(lesson_id != undefined) {

				localStorage.setItem("lesson_id", lesson_id);
				localStorage.setItem("pic", pic);

			}
			
			this.lesson_id = localStorage.getItem('lesson_id');
			this.pic = localStorage.getItem('pic');
			
			console.log(this.pic+'-----1------')
			

			var access_token = this.getUrlStr('access_token');
			var parentId = this.getUrlStr('parent_id');

			if(parentId == undefined) {
				parentId = 0;
			}

			var uid = this.getUrlStr('uid');

			console.log(parentId.toString().indexOf('?'));

			if(parentId.toString().indexOf('?') > 0) {
				parentId = parentId.split('?')[0];
			}

			var locurl = location.href;
			locurl = base64.encode(locurl.split('?')[0]);

			if(access_token != undefined) {

				localStorage.setItem("access_token", access_token);
				localStorage.setItem("parent_id", this.getUrlStr('uid'));

			}

			console.log('-3-' + localStorage.getItem('access_token'));

			if(localStorage.getItem('access_token') != null) {

				this.$root.registerjudge();
				this.$root.getShare();

			} else {

				console.log(222);
				this.$root.gotoWechat(locurl, parentId);
			}

			this.access_token = localStorage.getItem('access_token');

			this.getDetail();

		},

	}
</script>

<style>
	.audio-wrapper {
		background-color: #fcfcfc;
		margin: 10px auto;
		max-width: 670px;
		height: 2.5rem;
		border: 1px solid #e0e0e0;
	}
	
	.audio-left {
		float: left;
		text-align: center;
		width: 18%;
		height: 100%;
	}
	
	.audio-left img {
		width: 2rem;
		position: relative;
		top: 0.5px;
		margin: 0;
		display: initial;
		/* 解除与app的样式冲突 */
		cursor: pointer;
	}
	
	.audio-right {
		margin-right: 2%;
		float: right;
		width: 80%;
		margin-top: 1rem;
		/*height: 100%;*/
	}
	
	.audio-right p {
		font-size: 15px;
		height: 35%;
		margin: 8px 0;
		/* 歌曲名称只显示在一行，超出部分显示为省略号 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 243px;
		/* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
	}
	
	.progress-bar-bg {
		background-color: #d9d9d9;
		position: relative;
		height: 2px;
		cursor: pointer;
	}
	
	.progress-bar {
		background-color: #649fec;
		width: 0;
		height: 2px;
	}
	
	.progress-bar-bg span {
		content: " ";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		background-color: #3e87e8;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -5px;
		margin-left: -5px;
		cursor: pointer;
	}
	
	.audio-time {
		overflow: hidden;
		margin-top: -1px;
	}
	
	.audio-length-total {
		float: right;
		font-size: 12px;
	}
	
	.audio-length-current {
		float: left;
		font-size: 12px;
	}
</style>